<template>
    <div id="Group">
        <mt-field label="用户id" placeholder="用户id" :state="userId==''?'warning':'success'" v-model.trim="userId"></mt-field>
        <div @click="open">
            <mt-field label="起始时间" :readonly="true" placeholder="点击选择时间" :state="startTimestr==''?'warning':'success'" v-model.trim="startTimestr"></mt-field>
        </div>
        <div @click="open2">
            <mt-field label="结束时间" :readonly="true" placeholder="点击选择时间" :state="endTimestr==''?'warning':'success'" v-model.trim="endTimestr"></mt-field>
        </div>
        <div style="margin:10px 10px">
            <mt-button type="primary" size="large" @click.native="search">查找</mt-button>
        </div>
        <div class="showResult lay">
            <div class="showResultTitle">
                查询结果
            </div>
            <div class="contentResult" >
                <qin-you-view @click.native="toPath(item.UserID)" :key='index' v-for="(item,index) in group.arr">
                    <img :src="item.szHeadPicUrl" slot="icon">
                    <span slot="content">
                        <p>申请人id : <span class="time">{{item.UserID}}</span></p>
                    <p>申请人昵称 : <span class="time">{{item.UserName}}</span></p>
                    <p>申请时间 : <span class="time">{{item.ApplicationTime}}</span></p>
                    <p>处理时间 : <span class="time">{{item.CreateDate}}</span></p>
                    <p>处理状态 : <span class="success">已加入</span></p>
                    </span>
                    <div slot="to">></div>
                    <div slot="tool" style="text-align:right">
                        <mt-button type="default" size="small" @click.native.stop="kick(item.Id,item.UserName,index)">踢掉该成员</mt-button>
                    </div>
                </qin-you-view>
                <div v-if=" group.arr.length==0" class="noresult">
                    无符合条件的数据
                </div>
                <div v-if=" group.arr.length>0">
                    <div style="margin:10px 10px">
                        <mt-button type="primary" size="large" @click.native="loadMore" v-if=" group.nextPage< group.totalPages">加载更多</mt-button>
                        <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
                    </div>
                </div>
            </div>
        </div>
        <mt-datetime-picker ref="picker" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model.trim="starttime" @confirm="handleConfirmS">
        </mt-datetime-picker>
        <mt-datetime-picker ref="pickerend" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model.trim="endtime" @confirm="handleConfirmE">
        </mt-datetime-picker>
        <mt-popup v-model="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
            {{msg}}
        </mt-popup>
    </div>
</template>
<script>
    import QinYouView from '../../../components/QinyouView/QinYouView'
    import {
        MessageBox
    } from 'mint-ui'
    export default {
        name: "group",
        components: {
            QinYouView
        },
        data() {
            return {
                starttime: 0,
                endtime: 0,
                startDate: new Date('2017-01-01'), //时间选择器最小的时间
                endDate: new Date(), //时间选择器最大时间
                msg: "",
                startTimestr: "",
                endTimestr: "",
                popupVisible: false,
                userId: "",
                group: {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0
                }
            }
        },
        methods: {
            open() {
                this.$refs.picker.open();
            },
            open2() {
                this.$refs.pickerend.open();
            },
            handleConfirmS(time) {
                this.starttime = time;
                this.startTimestr = this.formateTimeObj(time) + " 00:00:00";
                // console.log(this.startTimestr);
            },
            handleConfirmE(time) {
                this.endtime = time;
                this.endTimestr = this.formateTimeObj(time) + " 23:59:59";
                // console.log(this.endTimestr);
            },
            formateTimeObj: function(obj) {
                let Y = obj.getFullYear();
                let M = obj.getMonth() + 1;
                let D = obj.getDate();
                if (M < 10) {
                    M = "0" + M;
                }
                if (D < 10) {
                    D = "0" + D;
                }
                return `${Y}-${M}-${D}`;
            },
            kick(Id, username, index) {
                //踢掉该成员
                MessageBox.confirm(`是否踢掉昵称为${username}的群成员`).then(action => {
                    let data = {
                        'functionname': "KickedOut",
                        body: JSON.stringify({
                            id: Id,
                        })
                    }
                    this.$http.post(`${this.baseUrl}/Main/UpdateData`, data).then(response => {
                        //  console.log(response);
                        if (response.data.code == 1) {
                            this.group.arr.splice(index, 1);
                        } else {
                        }
                    })
                }, () => {
                    //console.log('cancle')
                });
            },
            loadMore() {
                let getData = {
                    params: {
                        'functionname': "GetFriedList",
                        body: JSON.stringify({
                            startDate: this.startTimestr,
                            endDate: this.endTimestr,
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            userID: parseInt(this.userId == "" ? 0 : this.userId)
                        })
                    }
                }
                //  console.log(getData);
                this.getList(getData);
            },
            getList: function(getData) {
                this.$http.get(`${this.baseUrl}/Main/GetData`, getData).then(response => {
                    let data = response.data;
                    //  console.log(data)
                    if (data.code == 1) {
                        if (this.group.totalCount == 0) {
                            this.group.nextPage = 1;
                            this.group.arr = data.body;
                        } else if (this.group.totalCount > 0) {
                            this.group.arr = this.group.arr.concat(data.body);
                            this.group.nextPage = this.group.nextPage + 1;
                        }
                        this.group.totalPages = Math.ceil(data.totalCount / this.PAGESIZE);
                        this.group.totalCount = data.totalCount;
                    } else {
                        MessageBox("提示", data.msg);
                    }
                })
            },
            search() {
                if (this.startTimestr == "") {
                    MessageBox("提示", "起始时间不能为空");
                    return false;
                }
                if (this.endTimestr == "") {
                    MessageBox("提示", "结束时间不能为空");
                    return false;
                }
                this.group.totalCount = 0;
                this.group.nextPage = 0;
                let getData = {
                    params: {
                        'functionname': "GetFriedList",
                        body: JSON.stringify({
                            startDate: this.startTimestr,
                            endDate: this.endTimestr,
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            userID: parseInt(this.userId == "" ? 0 : this.userId)
                        })
                    }
                }
                // console.log(getData);
                this.getList(getData)
            },
            initView() {
                let getData = {
                    params: {
                        'functionname': "GetFriedList",
                        body: JSON.stringify({
                            startDate: "",
                            endDate: "",
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            userID: 0
                        })
                    }
                }
              //  console.log(getData);
                this.getList(getData)
            },
            toPath(Id) {
                this.$router.push(`/check/memberdetail/${Id}`)
            }
        },
        mounted() {
            document.body.style.background = "#fffbef"
        },
        created() {
            this.initView();
        }
    }
</script>